<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{component/_layout :: layout(~{::title},~{::headTitle}, ~{::section},~{::link},~{::script})}">
<head>
    <meta charset="UTF-8">
    <title>巡查检查系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{/css/elementUI.css}">
    <link rel="stylesheet" th:href="@{/css/role.css}">
</head>
<body>
<!--自定义头部标题-->
<headTitle>
    <h2 class="headTitle">角色管理</h2>
</headTitle>
<!--自定义的主页样式-->
<section>
    <div id="app">
        <div class="roleMenu">
            <div class="myRole">
                <!--展示角色表格-->
                <el-table :data="roleData" height="525" style="width: 100%">
                    <el-table-column prop="roleName" label="角色名称" width="150"></el-table-column>
                    <el-table-column prop="roleCode" label="角色编码" width="150"></el-table-column>
                    <el-table-column prop="remark" label="备注"></el-table-column>
                    <el-table-column width="180" align="right">
                        <template slot="header" slot-scope="scope">
                            操作 &nbsp;&nbsp;<el-button size="mini" @click="centerDialogVisible = true">增加角色</el-button>
                        </template>
                        <template slot-scope="scope" v-if="roleData[scope.$index].id>1">
                            <el-button size="mini" @click="lookPower(roleData[scope.$index].id,roleData[scope.$index].roleName)">查看</el-button>
                            <el-button size="mini"  @click="delRole(roleData[scope.$index].id)" type="danger">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页插件-->
                <el-pagination class="pageModel"
                               background
                               layout="prev, pager, next"
                               :current-page="index"
                               @current-change="updatePage"
                               :page-size="page"
                               :total="sumPage">
                </el-pagination>
            </div>
            <div class="myPower">
                <h2 style="text-align: center">{{roleName}}</h2>
                <el-tree
                        :data="rolePower"
                        show-checkbox
                        default-expand-all
                        node-key="id"
                        ref="tree"
                        highlight-current
                        :props="defaultProps">
                </el-tree>
                <br/>
                <el-button v-if="rolePower!=null" @click="addRolePermission">确定</el-button>
            </div>
            <!--弹出操作框-->
            <el-dialog title="增加角色" :visible.sync="centerDialogVisible" width="30%" center>
                <el-input placeholder="角色昵称" class="uploadUser" v-model="newRole.roleName" clearable></el-input>
                <el-input placeholder="角色编码" class="uploadUser" v-model="newRole.roleCode" clearable></el-input>
                <el-input placeholder="备注" class="uploadUser" v-model="newRole.remark" clearable></el-input>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addRole">确 定</el-button>
                </span>
            </el-dialog>

        </div>
    </div>
</section>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: function () {
            return {
                //存放角色信息
                roleData:[
                    {
                        roleName:'角色名称',
                        roleCode:'角色编码',
                        remark:'备注',
                    },
                ],
                //新增角色时的信息
                newRole:{
                    roleName:'',
                    roleCode:'',
                    remark:'',
                },
                //当前页数
                index: 1,
                //每页显示多少条数据
                page: 7,
                //总共多少条数据
                sumPage: 0,
                //角色名称
                roleName:'',
                //选择的角色id
                roleId:'',
                //角色权限
                rolePower:null,
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                centerDialogVisible:false,
            }
        },
        //加载事件
        created() {
            this.getRoleData(this.index, this.page);
        },
        //函数集群
        methods: {
            //获取到角色信息
            getRoleData(index, page){
                axios.post(`/yyds/machine_system/sys-role/list/${index}/${page}`).then(resp => {
                    console.log(resp.data);
                    this.roleData = resp.data.map.items;
                    this.sumPage = resp.data.map.total;
                })
            },
            //分页时
            updatePage(val) {
                this.getRoleData(val, this.page);
            },
            //查看权限
            lookPower(id,name){
                this.roleName = name;
                this.roleId = id;
                axios.post(`/yyds/machine_system/sys-permission/selectRolePermission/${id}`).then(resp => {
                    this.rolePower=[resp.data.map.sumItems.length]
                    console.log("**************");
                    console.log(resp.data);
                    console.log("**************");
                    for(let i=0;i<resp.data.map.sumItems.length;i++){
                        this.rolePower[i] = {
                            id:'',
                            label:'',
                            children:[resp.data.map.sumItems[i].children.length],
                        };
                        this.rolePower[i].id=resp.data.map.sumItems[i].id;
                        this.rolePower[i].label=resp.data.map.sumItems[i].name;
                        for (let j=0;j<resp.data.map.sumItems[i].children.length;j++){
                            this.rolePower[i].children[j] = {
                                id:'',
                                label:'',
                            };
                            this.rolePower[i].children[j].id=resp.data.map.sumItems[i].children[j].id;
                            this.rolePower[i].children[j].label=resp.data.map.sumItems[i].children[j].name;
                        }
                    }
                    let ro = "";
                    for(let i=0;i<resp.data.map.items.length;i++){
                        for (let j=0;j<resp.data.map.items[i].children.length;j++){
                            if (j<resp.data.map.items[i].children.length-1){
                                ro += resp.data.map.items[i].children[j].id+",";
                            }else{
                                ro += resp.data.map.items[i].children[j].id+",";
                            }
                        }
                    }

                    this.$refs.tree.setCheckedKeys(ro.split(","));

                });
            },
            //赋予权限
            addRolePermission(){
                let ids = this.$refs.tree.getCheckedKeys();
                axios.post(`/yyds/machine_system/sys-permission/addRolePermission/${this.roleId}?ids=${ids}`).then(resp => {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.lookPower(this.roleId,this.roleName);
                });
            },
            //删除角色
            delRole(id){
                this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete(`/yyds/machine_system/sys-role/delete/${id}`).then(resp=>{
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getRoleData(1, this.page);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            //增加角色
            addRole(){
                if (this.newRole.roleName=="" || this.newRole.roleCode=="" || this.newRole.remark==""){
                    this.$message({
                        message: '请完善角色信息',
                        type: 'warning'
                    });
                    return;
                }
                axios.post("/yyds/machine_system/sys-role/createRole",{
                    "roleName":this.newRole.roleName,
                    "roleCode":this.newRole.roleCode,
                    "remark":this.newRole.remark,
                }).then(resp=>{
                    this.$message({
                        message: '增加成功',
                        type: 'success'
                    });
                })
                this.getRoleData(1, this.page);
                this.centerDialogVisible = false;
            }
        },
    })
</script>
</body>
</html>